<template>
  <h1>{{ msg }}</h1>
  <button @click="count++">count is: {{ count }}</button>
  <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
  <h1>加法计算器</h1>
  <input
    type="text"
    v-model="state.num1"
    @keyup="add()"
  >
  <span>+</span>
  <input
    type="text"
    v-model="state.num2"
    @keyup="add()"
  >
  <span>=</span>
  <span>{{state.result}}</span>
  <!-- <span>{{num1}}}</span> -->
  <br>
  <button @click="clickEvent">点我</button>
</template>

<script>
import { computed, reactive, ref,onMounted,onUnmounted,onUpdated } from "vue";
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  //{emit} es6 解构的方式获取emit
  setup(props,{emit}) {
    //抽离进state
    const state = reactive({
      num1: 0,
      num2: 0,
      //  result:0
      result: computed(() => parseInt(state.num1) + parseInt(state.num2)),
    });
    function add() {
      state.result = parseInt(state.num1) + parseInt(state.num2);
    }
    const clickEvent = ()=>{
      emit("sendMsg",state.result);
      console.log(props.msg,"click");
    }
      onMounted(() => {
      console.log('mounted!')
    })
    onUpdated(() => {
      console.log('updated!')
    })
    onUnmounted(() => {
      console.log('unmounted!')
    })
    const count = ref(0);
    // const num1 = ref(0);
    // const num2 = ref(0);
    // const result = ref(0);
    //const result = computed(() => parseInt(num1.value)+parseInt(num2.value))
    //  function add(){
    //    result.value = parseInt(num1.value)+parseInt(num2.value)
    //  }

    return {
      //  num1,
      //  num2,
      //  result,
      //add,
      state,
      clickEvent
    };
  },

  //2.x 用法
  // data() {
  //   return {
  //     count: 0,
  //     num1:0,
  //     num2:0,
  //     result:0
  //   }
  // },
  // //利用计算属性
  // computed: {
  //     // result(){
  //     //  return parseInt(this.num1)+parseInt(this.num2);
  //     // }
  //   },
  //   methods: {
  //     add(){
  //     //v-model 获取value
  //     //this.result = parseInt(this.num1)+parseInt(this.num2);
  //     //ref 获取value
  //     this.result = parseInt(this.$refs.num1.value)+parseInt(this.$refs.num2.value);
  //     }
  //   }
};
</script>
